<template>
	<view style="height: 20rpx"></view>
	<view @tap="toDetail(item.userId)" class="item flex-row" v-for="item in list" :key="item.id">
		<xbc-avatar :src="item.userAvatar" size="40px" />
		<view class="title">{{ item.userName }}</view>
	</view>
	<view style="height: 20rpx"></view>
	<uni-load-more :status="status"></uni-load-more>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'
import XBCIM from 'xbcim'

const list = ref([])
const status = ref('more')
const conversation = uni.getStorageSync('currentConversation')
const isComplete = ref(false)
const state = reactive({
	groupId: conversation?.conversationId,
	page: 1
})

function toDetail(userId: string) {
	uni.navigateTo({
		url: `/pages/contact/detail?userId=${userId}`
	})
}

// 获取成员列表
async function getList() {
	const res = await XBCIM.getGroupMemberList(state)
	
	if(state.page > 1){
		list.value.push(...res?.list)
	}else{
		list.value = res?.list || []
	}
	
	isComplete.value = res?.isComplete
	status.value = isComplete.value ? 'no-more' : 'more'
}

onReachBottom(() => {
	if(isComplete.value) return
	state.page++
	getList()
})

getList()
</script>

<style lang="scss" scoped>
.item {
	padding: 20rpx 30rpx;

	.title {
		flex: 1;
		color: #333;
		font-size: 30rpx;
		margin-left: 30rpx;
		@include line-height(80rpx);
	}
}
</style>